<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一行 -->
    <Row :class="'m-0'">
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="searchPaymentOptions.name"
          placeholder="服务项目名"
        />
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="searchPaymentOptionsList"
          icon="ios-search"
          >查询</Button
        >
      </Col>
      <Col span="2">
        <Button class="m-2 w-75" type="error" @click="newPaymentOption"
          >+ 新增</Button
        >
      </Col>
    </Row>

    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="columnInfo"
        :data="resultPaymentOptionsList"
      >
        <!-- 气泡提示 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="primary" @click="show(row)">详细</Button>
              </DropdownItem>
              <DropdownItem>
                <Button type="error" @click="abandon(row)">删除</Button>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="pageInfo.size"
        @on-change="pageSearch"
        :total="pageInfo.total"
        :current="pageInfo.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    let self = this
    return {
      pageInfo: {
        page: 1,
        size: 10,
        total: 0,
        totalPage: '',
      },
      resultPaymentOptionsList: [],
      searchPaymentOptions: {
        name: '',
      },
      columnInfo: [
        {
          title: '#',
          width: 80,
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.index + (self.pageInfo.page - 1) * self.pageInfo.size + 1
            )
          },
        },
        {
          title: '分期业务',
          key: 'name',
          width: 300,
          fixed: 'left',
        },
        {
          title: '利息期数',
          key: 'base',
          width: 150,
        },
        {
          title: '本金期数',
          key: 'main',
          width: 150,
        },
        {
          title: '利率',
          key: 'rate',
          width: 150,
        },
        {
          title: '服务是否上架',
          key: 'status',
          width: 300,
          align: 'center',
          render: function(h, params) {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  size: 'large',
                  value: params.row.status,
                  'true-value': true,
                  'false-value': false,
                },
                scopedSlots: {
                  open: function() {
                    return h('span', '开启')
                  },
                  close: function() {
                    return h('span', '关闭')
                  },
                },
                on: {
                  'on-change': (val) => {
                    self.http.put({
                      url: '/paymentOptions/status',
                      param: {
                        id: params.row.id,
                        status: val,
                      },
                    })
                  },
                },
              }),
            ])
          },
        },
        {
          title: '每月还款日',
          key: 'payDate',
          width: 200,
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          fixed: 'right',
        },
      ],
    }
  },
  methods: {
    init: function() {
      this.$data.pageInfo.page = 1
      this.searchPaymentOptionsList()
    },
    newPaymentOption: function() {
      this.$router.push({
        name: 'paymentOptions_new',
      })
    },
    show: function(row) {
      this.$router.push({
        name: 'paymentOptions_detail',
        params: {
          row,
        },
      })
    },
    searchPaymentOptionsList: function() {
      this.http
        .get({
          url: '/paymentOptions/listPage',
          param: {
            page: this.pageInfo.page,
            size: this.pageInfo.size,
            paymentOptionsStr: this.searchPaymentOptions,
          },
        })
        .then((data) => {
          console.log(data)
          this.$data.pageInfo = data.pageInfo
          this.$data.resultPaymentOptionsList = data.list
        })
    },
    pageSearch: function(changedPage) {
      this.$data.pageInfo.page = changedPage
      this.searchPaymentOptionsList()
    },
    changeSize: function(changeSize) {
      this.$data.pageInfo.size = changeSize
      this.searchPaymentOptionsList()
    },
    //放弃线索
    abandon: function(row) {
      let param = {
        'resource.id': row.resourceId,
      }
      this.message.confirm({
        title: '删除提示',
        content: '即将删除【' + row.name + '】的项目，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: `/paymentOptions/delete/${row.id}`,
            })
            .then((data) => {
              this.searchPaymentOptionsList()
              this.message.info('删除成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  created: function() {
    this.init()
  },
}

/*
    	此函数主要解析返回的data，将复杂的级联对象封装为tableinfo所对应的字段的对象
    */
function parseDataObj(data) {
  //从session中取出用户的集合
  let userList = JSON.parse(localStorage.getItem('USER_LIST'))
  // let userList = JSON.parse(store.state.currentUser)
  //定义一个跟进人名字变量
  let autorName = ''
  //定义一个添加人名字变量
  let cuName = ''

  var resourcesArray = []
  data.list.forEach((list) => {
    if (list.reservationBackview == undefined) {
      var judegReservationBackviewTime = null
    } else {
      judegReservationBackviewTime = list.reservationBackview.datetime
    }
    let autorName = null
    userList.forEach((user) => {
      if (user.userId == list.tryListen.autor) {
        autorName = user.nickName
      }
      if (user.userId == list.tryListen.cu) {
        cuName = user.nickName
      }
    })
    let poko = {
      tryId: list.tryListen.id,
      tryStatu: list.tryListen.statu,
      des: list.tryListen.des,
      autor: autorName,
      datetime: list.tryListen.dateTime,
    }

    resourcesArray.push(poko)
  })
  return resourcesArray
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}
.search {
  margin-right: 5px;
}

.hidden {
  cursor: pointer;
  position: relative;
  top: 25px;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 20px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}

.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
</style>
<style>
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
